import React from 'react'
import lcss from "../css/left.module.css"
import { useState, useEffect } from 'react'
import axios from 'axios'
import { Link } from 'react-router-dom'

const Left = () => {

    const [data, setdata] = useState([])
    let num = (data) => {
        var newArr = [];
        for (let i = 1; i <= 5; i++) {
            let num = parseInt(Math.random() * data.length);
            newArr = newArr.concat(data.slice(num, num + 1));
        }
        console.log(newArr);
        setdata(newArr);
    }
    useEffect(() => {
        axios('/tyj/tuijian').then((res) => {
            // console.log(res.data);
            num(res.data)
            
        })
    },[])
    return (
        <div className={lcss.left_box}>
            <div className={lcss.right_top}>
                <h3>分享页面</h3>
                <div className={lcss.fenge}></div>
                <div className={lcss.confont}>
                    <a href="" className={lcss.share}>
                        <img src="https://www.brandstar.com.cn/_nuxt/img/black-weibo.4eddcdf.svg" className={lcss.normal} alt="" />
                        <img src="https://www.brandstar.com.cn/_nuxt/img/colorful-weibo.7a0dd2a.svg" alt="" className={lcss.hover} />
                    </a>
                    <a href="" className={lcss.share}>
                        <img src="" alt="" className={lcss.normal} />
                        <img src="https://www.brandstar.com.cn/_nuxt/img/colorful-wechat.0342d87.svg" className={lcss.hover} alt="" />
                        <div className={lcss.box}>
                            <p>关注公众号</p>
                            <img src="https://www.brandstar.com.cn/_nuxt/img/wechat-brandstar-qrcode.43cc979.jpg" alt="" />
                        </div>
                    </a>
                </div>
            </div>
            <div className={lcss.right_bottom}>
                <h3>推荐关注</h3>
                <div className={lcss.brand}>
                    {data.map((el, index) => {
                        return (<div className={lcss.brand_box} key={index}>
                              <Link to={{pathname:'/Detail',state:{brandName:`${el.brandName}`}}}>  <img src={el.logo} alt="" className={lcss.touxiang} /></Link>
                            <div className={lcss.brand_text}>
                                <div>{el.brandName}</div>
                                <p>{el.summary}</p>
                                <button className={lcss.guanzhu}>关注</button>
                            </div>
                        </div>)
                    })}

                </div>
            </div>
        </div>
    )
}

export default Left

